import React, { useMemo } from 'react'
import styles from './index.module.less'
import type { CheckboxScheme } from '../../interface'
import IconFont from '@/components/IconFont'

export default function Checkbox(props: { scheme: CheckboxScheme; answers: any[]; idx: number }) {
    const { scheme, answers = [], idx } = props
    const { properties } = scheme || {}

    /** 其他答案 */
    const answersLabel = useMemo(() => {
        let result: Record<string, string> = {}
        answers?.forEach(item => {
            if (item.hasOther) {
                result[item.uuid] = item.label
            }
        })
        return result
    }, [answers])

    return (
        <div className={styles.checkbox_container}>
            <div className={styles.question}>
                {idx}、{properties?.title}
            </div>
            {properties?.content
                ?.filter(item => answers?.filter((ans: any) => ans?.uuid === item?.uuid).length)
                .map(item => {
                    return (
                        <div key={item.label} className={styles.checked}>
                            <IconFont type="icon-danxuangouxuan" className={styles.checked_icon} />
                            <span>{item?.hasOther ? answersLabel?.[item.uuid] : item?.label}</span>
                        </div>
                    )
                })}
        </div>
    )
}
